<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        tbody{
            text-align: center;
        }
    </style>
</head>
<body>
<form id="searchForm">
    <input type="hidden" name="startPageNo" value="1" >
</form>
<table border="1" width="800" cellspacing="0">
    <thead>
    <th>序号</th>
    <th>主题</th>
    <th>投票/查看</th>
    <th>创建时间</th>
    </thead>
    <tbody>
    </tbody>
</table>
<div id="paging"></div>
<script type="text/javascript" th:src="@{/jquery-3.7.1.js}"></script>
<script type="text/javascript">
    $(function (){
        loadTableData();
    })
    function loadTableData(){
        $.getJSON("/subjects/find",$("#searchForm").serialize(),function (res){
            console.log(res)
            var data = res['data'];
            var strbody = '';
            for (var i = 0; i < data.length; i++) {
                strbody +='<tr>' +
                    '<td>' +data[i]['id']+ '</td>'+
                    '<td> <a href="/vote?id=' + data[i]['id']+'">' +data[i]['title']+ '</a></td>'+
                    '<td>' +data[i]['totalVotes']+'/'+data[i]['viewTimes']+ '</td>'+
                    '<td>' +data[i]['createDate']+ '</td>'+
                    '</tr>'
            }
            $('tbody').html(strbody);
            var strPaging = '';
            var currentPageNo = res['currentPageNo'];
            var totalPageCount = res['totalPageCount']
            if (currentPageNo > 1) {
                strPaging += '<a href="javascript:pageNav(1);">首页</a>&nbsp;&nbsp;&nbsp;' +
                    '<a href="javascript:pageNav(' + (currentPageNo - 1) + ');">上一页</a>&nbsp;&nbsp;&nbsp;'
            } else {
                strPaging += '首页'+'&nbsp;&nbsp;&nbsp;' +
                    '上一页&nbsp;&nbsp;&nbsp;'
            }
            if (currentPageNo < totalPageCount) {
                strPaging += '<a href="javascript:pageNav(' + (currentPageNo + 1) + ');">下一页</a>&nbsp;&nbsp;&nbsp;' +
                    '<a href="javascript:pageNav(' + totalPageCount + ');">尾页</a>&nbsp;&nbsp;&nbsp;'
            } else {
                strPaging += '下一页'+'&nbsp;&nbsp;&nbsp;' +
                    '尾页'+'&nbsp;&nbsp;&nbsp;'
            }
            strPaging += '第' + currentPageNo + '页/共' + totalPageCount + '页';
            $("#paging").html(strPaging);
        })
    }
    function pageNav(pageNo) {
        $("input[name=startPageNo]").val(pageNo);
        loadTableData();
    }
</script>
</body>
</html>